<template>
  <div class="container">
    <!-- fn(e)默认，自带的 -->
    <h1 @click="$event.target.style.color='red'">父组件</h1>
    <hr>
    <!-- 1:通过:modelValue="count"，传给子组件数据 -->
    <!-- 2：通过@update:modelValue="count=$event"通知父组件改数据 -->

    <!-- <Son :modelValue="count"
         @update:modelValue="count=$event" /> -->

    <!-- 简写，效果同上句一样 -->
    <Son v-model="count" />
  </div>
</template>
<script>
import { ref } from 'vue'
import Son from './Son.vue'
export default {
  name: 'App',
  components: {
    Son
  },
  setup () {
    const count = ref(10)
    return { count }
  }
}
</script>
<style scoped lang="less"></style>